<template>
  <el-menu
      class="el-menu-demo"
      mode="horizontal"
      :ellipsis="false"
      :class='store.state.color_state? "moon_color" : "sun_color"'
  >
    <el-sub-item index="1">
      <img width="150px" src="" alt="" height="55">
    </el-sub-item>
    <el-sub-item index="2">
      <Fold class="icon" v-if="isCollapse" @click="flexible_switch"/>
      <Expand class="icon" v-if="!isCollapse" @click="flexible_switch"></Expand>
    </el-sub-item>
    <div class="flex-grow"/>
    <el-sub-item index="2">
      <Sun class="icon" v-if="isColor" @click="color_switch"/>
      <Moon class="icon" v-if="!isColor" @click="color_switch"/>
    </el-sub-item>
    <el-sub-menu index="3">
      <template #title>
        <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"/>
        <span width="5px" :class='store.state.color_state? "moon_color" : "sun_color"'>&emsp;Admin</span>
      </template>
      <el-menu-item index="3-1">
        <el-icon>
          <User/>
        </el-icon>
        个人中心
      </el-menu-item>
      <el-menu-item index="3-2">
        <el-icon style="color: #F56C6C">
          <Right/>
        </el-icon>
        退出
      </el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>

<script lang="ts" setup>
import Fold from '@/components/flexible/Fold.vue'
import Expand from '@/components/flexible/Expand.vue'
import Sun from  '@/components/flexible/Sun.vue'
import Moon from  '@/components/flexible/Moon.vue'

import mitter from '@/utils/bus'

import store from "@/store/index"

import {ref} from 'vue'

const isCollapse = ref(true)
const isColor = ref(store.state.color_state)
const flexible_switch = () => {
  mitter.emit('fn', isCollapse)
  isCollapse.value = !isCollapse.value
}
const color_switch = () => {
  isColor.value = !isColor.value
  store.commit("changeTheme")
}

</script>

<style>
.flex-grow {
  flex-grow: 1;
}

.icon {
  font-size: 25px;
  height: 2.5em;
  width: 2em;
}
.sun_color {
  padding: 0;
  background-color: #FFFFFF;
}
.moon_color {
  padding: 0;
  color: #FFFFFF;
}
</style>
